<!-- 选座 -->
<template>
  <!--  :pure-bg="true"-->
  <yy-page custom-style="background: linear-gradient(180deg, #4FD2CD 0%, #42D5FF 100%);">
    <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
    <yy-navbar :border="false" :title="query.cinemaName" left-icon-color="#fff" title-color="#fff" bg-color="#4FD2CD" @left-click="backClick" :auto-back="false"></yy-navbar>
    <!-- #endif-->
    <view class="chooseSet" v-if="reloadShow">
      <view ref="seatTop">
        <view class="seat-header">
          <view class="seat-header-item">
            <view class="seat-item s"></view>
            可选
          </view>
          <view class="seat-header-item">
            <view class="seat-item s selected"></view>
            已选
          </view>
          <view class="seat-header-item">
            <view class="seat-item s disabled"></view>
            不可选
          </view>

          <view class="seat-header-item">
            <view class="seat-item s sell"></view>
            已售
          </view>
        </view>
        <view class="set-top-bg"></view>
        <view class="fc-white fs24 tc mb40">{{ planInfo.hallName }}</view>
      </view>
      <movable-area class="seat-center" scale-area v-if="seatShow && !seatErrorShow" id="seatCenter">
        <movable-view
          :scale-max="changeStyle.maxScale"
          :scale-min="changeStyle.minScale"
          :scale-value="changeStyle.scale"
          damping="30"
          class="seat-box"
          id="seatBox"
          :out-of-bounds="false"
          :scale="true"
          @scale="seatScale"
          @change="seatChange"
          :animation="false"
          :x="x"
          :y="y"
          direction="all"
        >
          <view id="seatNav" class="seat-left" :style="{ transform: 'translateX(' + changeStyle.x + 'px)' }">
            <view class="seat-item" v-for="(item, index) in row" :key="index">{{ item }}</view>
          </view>
          <view class="seat" id="seatContent">
            <view class="h-line" v-if="row.length" :style="{ marginTop: row.length & 1 ? '-70rpx' : '-40rpx' }"></view>
            <view
              class="v-line"
              :style="{
                marginLeft: colLen & 1 ? '30rpx' : '-1rpx'
              }"
              v-if="row.length"
            ></view>
            <view class="seat-row" v-for="(item, rowIndex) in seatInfos" :key="rowIndex">
              <seat-item
                v-for="(colItem, fkey) in item"
                :key="fkey"
                :areas="planInfo.areas || []"
                :lovers="colItem.seatType !== 'N'"
                :none="colItem.seatState === 2"
                :disabled="colItem.seatState === -1 && colItem.seatFlag === 1"
                :selected="colItem.seatState === 1"
                :sold="colItem.seatState === -1 && colItem.seatFlag !== 1"
                :item="colItem"
                @click="choose"
              />
            </view>
          </view>
        </movable-view>
      </movable-area>
      <view class="choose-skeleton flex-m flex-c" v-if="!seatShow && !seatErrorShow">
        <!-- #ifndef MP-ALIPAY -->
        <u-loading-icon text="座位加载中" vertical text-color="white" color="white" text-size="16"></u-loading-icon>
        <!-- #endif-->
        <!-- #ifdef MP-ALIPAY-->
        <image class="icon-loading" mode="scaleToFill" src="../../static/img/loading.png"></image>
        <!-- #endif-->
      </view>

      <seat-error v-if="seatErrorShow" @refresh="getPlanSeat" />
    </view>

    <view class="footer" :style="{ 'padding-bottom': safeBottom + 'rpx' }">
      <view class="f-btn__content">
        <view class="pl20 pr20 pt30" v-if="cinemaSynopsis">
          <cinema-notice v-if="cinemaSynopsis" :value="cinemaSynopsis" />
        </view>
        <view class="flex mb20 pl30 pr30 pt30 flex-m">
          <view class="fs34 fb">
            {{ planInfo.filmName || '' }}
          </view>
          <view @click="openPlan" class="flex-right flex flex-m fc-primary fs22">
            更换场次
            <view :class="{ arrow_down: showPlan }">
              <u-icon size="12" name="arrow-down" color="#3BC5D2"></u-icon>
            </view>
          </view>
        </view>
        <view class="ml30 mb20">
          <tip-type :tagList="tagList"></tip-type>
        </view>
        <view class="flex pr30 pl30 pb35 flex-bottom" v-if="planInfo.sDate">
          <view class="fc-primary fs22 mr15">
            {{ planInfo.sDate | getDateDesc }}
          </view>
          <view class="fc-primary fs22 mr15">
            {{ planInfo.sDate | getDateFormat('MM月DD日') }}
          </view>
          <view class="flex flex-m">
            <view class="fs32 fb">{{ planInfo.sTime }}</view>
            <image class="icon-arrow" style="height: 6rpx; width: 32rpx; margin: 0 6rpx" src="@/static/img/cinema/icon-arrow.png" alt="" />
            <view class="fs32 fb">{{ planInfo.eTime }}</view>
          </view>
          <view class="fc8 fs22 pl10" v-if="planInfo.copyLanguage || planInfo.copyType">({{ planInfo.copyLanguage }}{{ planInfo.copyType }})</view>
        </view>
        <view :class="{ showplan: showPlan, closeplan: !showPlan }">
          <view class="plan-time_content">
            <plan-time @change="planChange" :date-list="dateList" v-model="planKey" />
          </view>
        </view>

        <!-- 选择的结果 -->
        <view class="bc-white">
          <scroll-view :show-scrollbar="false" scroll-x class="mt10 pb40 plr30 flex bc-white nowrap seat-date-scroll">
            <view class="flex-b">
              <seat-info-item
                @close="removeSeat(index)"
                @select="autoSelect"
                v-for="(item, index) in limit"
                :key="index"
                :limit="limit"
                :index="index + 1"
                :seat-piece-name="getChoosetItem(index).seatPieceName || ''"
                :price="salePrice"
                :has-commerce-price="planInfo.hasCommercePrice"
              />
            </view>
          </scroll-view>
        </view>

        <view class="btn-wrap">
          <view class="btn-tip flex flex-c-m" v-if="minPrice && planInfo.hasCommercePrice">确定选座后查看优惠购票价格，仅需{{ minPrice }}元起</view>
          <view @click="submit" class="btn flex flex-c-m bc-primary">
            <view class="mr20" v-if="total && planInfo.hasCommercePrice">{{ total }}</view>
            确定选座</view
          >
        </view>
      </view>
    </view>
    <u-modal @confirm="agreen" :confirm-text="modal.confirmText" :show="modal.show" :content="modal.content" :title="modal.title"> </u-modal>
  </yy-page>
</template>

<script>
  import CinemaNotice from './components/CinemaNotice.vue'
  import TipType from '@/components/TipType'
  import SeatItem from './components/SeatItem'
  import PlanTime from './components/PlanTime' // 排期时间
  import SeatInfoItem from './components/SeatInfoItem'
  import auth from '@/utils/auth'
  import SeatError from './components/SeatError'
  import { handelJumpUrl } from '@/utils/handleUrl'
  import sharePage from '@/mixins/sharePage'
  const STATUS_NONE = 2 // 空白
  const STATUS_UNCHECK = 0 // 未选
  const STATUS_CHECKED = 1 // 已选
  const STATUS_LOCK = -1 // 不可选

  export default {
    name: 'choose-set',
    components: {
      PlanTime,
      SeatInfoItem,
      SeatError,
      SeatItem,
      TipType,
      CinemaNotice
    },
    mixins: [sharePage],
    data() {
      return {
        showCanUse: false,
        content: '',
        modal: {
          title: '购票实名信息登记',
          content: '',
          show: false,
          confirmText: '我已知悉'
        },
        x: 0,
        y: 0,
        safeBottom: 34,
        seatErrorShow: false,
        showPlan: false,
        seatShow: false,
        reloadShow: true,
        dateList: [], //排期
        query: {
          cinemaName: '选择座位',
          title: ''
        },
        planInfo: {}, // 排期信息
        seatInfos: [], // 座位信息
        limit: 4, // 最大选座
        salePrice: 0, // 售价
        row: [],
        planKey: '', // 选中的排期key
        mobile: '', // 手机号
        cinemaSynopsis: '', // 公告
        autoChooseSeat: [], // 自动选择
        allSet: [],
        colLen: 0, //最大col的长度
        checkSeat: [], //选中的座位信息
        domeInfo: {
          seatBox: {},
          seatCenter: {}
        },
        changeStyle: {
          x: 0,
          y: 0,
          storeX: 0,
          scale: 0.7, // 倍数
          navScale: 0.7,
          maxScale: 1, //最大放大倍数
          minScale: 0.5 //最小缩放
        },
        pageHide: false,
        hideLock: false,
        popstateCount: 0,
        minUnitPrice: 0,
        tagList: [],
        isReload: false // 是否刷新座位
      }
    },
    // #ifdef H5
    beforeRouteLeave(to, from, next) {
      const toPath = to.path
      console.log('beforeRouteLeave', to, from, next)
      if (this.checkSeat.length > 0 && toPath === '/subPages/selectCinema/selectCinema') {
        this.$msg
          .showModal({
            content: '返回后，您当前选中的座位将不再保留',
            cancelText: '取消',
            confirmText: '确定'
          })
          .then(() => {
            next()
          })
          .catch(() => {
            next(false)
          })
      } else {
        next()
      }
    },
    // #endif
    watch: {
      checkSeat: {
        handler() {
          //  #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
          this.checkSeat.length > 0 ? this.$tools.enable('返回后，您当前选中的座位将不再保留') : this.$tools.disable()
          // #endif
        },
        deep: true
      }
    },
    computed: {
      logoWatermark() {
        const data = auth.getLocBaseSet()
        return data.logoWatermark || ''
      },

      total() {
        if (this.checkSeat.length > 0) {
          return this.$utils.toFixed(this.salePrice * this.checkSeat.length) + '元'
        }
        return 0
      },
      minPrice() {
        return this.$utils.toFixed(this.query.minUnitPrice * this.checkSeat.length)
      }
    },

    onLoad(options) {
      this.query = options
      this.query.cinemaName = this.$auth.getChooseFilmName()
    },
    onShow() {
      if (!this.pageHide) {
        this.x = 0
        this.y = 0
        // 黑屏和进入后台从新打开不需要刷新，从确认订单页退回和正常流程进入需要刷新
        this.init()
      }

      // #ifdef H5
      document.title = this.$auth.getChooseFilmName()
      // #endif
    },

    onReady() {
      // #ifdef H5
      this.$utils.createTitle(this.$auth.getChooseFilmName())
      // #endif
    },
    onHide() {
      // hideLock在去支付弹框和确认选座跳转时候手动改变
      if (!this.hideLock) {
        // 正常进入后台 进入后锁定不刷新
        this.pageHide = true
      } else {
        // 页面跳转时候重置 用于下次进入时候刷新
        this.hideLock = false
        this.pageHide = false
      }
    },
    onUnload() {
      this.checkSeat = []
      this.reloadSeatNav()
      //  #ifdef MP-WEIXIN || MP-TOUTIAO ||MP-ALIPAY
      this.$tools.disable()
      // #endif
    },

    methods: {
      // 初始化方法
      init() {
        this.reloadSeatNav()
        this.reload()
      },

      reloadSeatNav() {
        this.changeStyle = {
          x: 0,
          y: 0,
          storeX: 0,
          scale: 0.7, // 倍数
          navScale: 0.7,
          maxScale: 1, //最大放大倍数
          minScale: 0.5 //最小缩放
        }
      },
      // 处理后退
      backClick() {
        this.$tools.navigateTo(-1)
      },

      planHeadDateList() {
        const query = this.query
        const data = {
          cinemaId: query.cinemaId,
          planKey: query.planKey
        }
        uni.$api.plan.planHeadDateList(data).then((res) => {
          this.dateList = res
        })
      },
      planChange() {
        this.seatShow = false
        this.$utils.throttle(this.getPlanSeat)
      },

      // 获取已选择座位
      getChoosetItem(index) {
        const item = this.checkSeat[index]
        return item || {}
      },
      // 获取座位信息 排期信息
      getPlanSeat() {
        const data = {
          cinemaId: this.query.cinemaId,
          planKey: this.planKey
        }
        this.isReload = true
        uni.$api.plan
          .getPlanSeat(data)
          .then((res) => {
            this.checkSeat = []
            this.refreshSeat()
            const data = res
            const oldOrderId = data.oldOrderId
            this.cinemaSynopsis = data.cinemaSynopsis || ''
            this.autoChooseSeat = data.autoChooseSeat || []
            if (oldOrderId !== '0') {
              // , needLoading: true
              const query = { orderId: oldOrderId }
              this.$msg
                .showModal({
                  content: '您有一笔未支付的订单',
                  cancelText: '取消订单',
                  confirmText: '去支付'
                })
                .then(() => {
                  if (data.lockJumpPay && data.lockJumpPay.action) {
                    handelJumpUrl(data.lockJumpPay)
                    return
                  }
                  this.hideLock = true

                  this.$tools.navigateTo('/pagesOrder/sureOrder/index', query)
                })
                .catch(() => {
                  uni.$api.orderFilm.unLockSeat(query).then((res) => {
                    this.$msg.toast('操作成功')
                    this.getPlanSeat()
                  })
                })
            }

            this.planInfo = data.planInfo
            this.tagList = data.tagList
            this.seatInfos = this.setSeatInfo(data.seatInfos)
            this.row = data.row
            // this.limit = 6
            this.limit = +data.planInfo.maxLock
            console.log('this.limit', this.limit)
            this.salePrice = data.planInfo.salePrice
            this.seatErrorShow = !data.seatInfos.length

            this.planInfo.computeDate = this.$utils.getDateDesc(this.planInfo.eDate)
            this.flatSetlist()
            this.caclColLen()
          })
          .catch(() => {
            // this.$msg.hideLoading()
            this.seatErrorShow = true
          })
      },
      setSeatInfo(list) {
        // 设置座位图
        const seatList = list
        if (seatList.length) {
          const len = seatList[0].length
          const minLen = 14
          if (len < minLen) {
            const cLen = ~~((minLen - len) / 2)
            if (cLen > 0) {
              const seatItem = {
                graphRow: '',
                graphCol: '',
                seatState: STATUS_NONE
              }
              const fillArray = new Array(cLen).fill(seatItem)
              seatList.forEach((rowList) => {
                rowList.push(...this.$utils.deep(fillArray))
                rowList.unshift(...this.$utils.deep(fillArray))
              })
            }
            const pLen = seatList.length
            for (let i = 0; i < pLen; i++) {
              const ccLen = seatList[i].length
              for (let j = 0; j < ccLen; j++) {
                const it = seatList[i][j]
                it.graphRow = i
                it.graphCol = j
              }
            }
          }
          for (let sLen = seatList.length; sLen--; ) {
            if (seatList[sLen].length) {
              for (let cLen = seatList[sLen].length; cLen--; ) {
                seatList[sLen][cLen].fkey = `${sLen}-${cLen}`
              }
            }
          }
        }
        return seatList
      },
      flatSetlist() {
        //扁平化座位数据
        this.allSet = []
        const seatInfo = this.seatInfos
        for (let len = seatInfo.length; len--; ) {
          const cInfo = seatInfo[len]
          for (let clen = cInfo.length; clen--; ) {
            this.allSet.push(cInfo[clen])
          }
        }
      },
      caclColLen() {
        // 计算列
        const colLens = this.seatInfos.map((i) => i.length)
        const colLen = Math.max(...colLens)
        this.colLen = colLen
      },
      choose(e) {
        // 选中
        const item = e
        const relationSeats = this.getRelationSeat(item.seatPieceNo) //获取关联座位
        // console.log(item, item.seatState)
        const ableLen = this.limit - this.checkSeat.length //剩余可选的座位
        const relationLen = relationSeats.length //关联座位数
        switch (item.seatState) {
          case STATUS_UNCHECK:
            //可以选择
            if (relationLen > ableLen) {
              if (relationLen === 1) {
                this.$msg.toast(`最多只能选择${this.limit}个座位`)
              } else {
                //关联座位 特殊提示
                // this.$msg.toast(`本次剩余可选座位不足${relationLen}个`)
              }

              return
            }
            this.addChoose(relationSeats)

            break
          case STATUS_LOCK:
            break
          case STATUS_CHECKED:
            this.removeChoose(relationSeats)
            break
        }
      },
      autoSelect(index) {
        const _checkSeat = this.$utils.deep(this.checkSeat)
        if (_checkSeat.length > 0) {
          for (let i = 0; i < _checkSeat.length; i++) {
            this.choose(_checkSeat[i])
          }
        }
        if (this.autoChooseSeat.length >= index) {
          const list = this.autoChooseSeat[index - 1]
          for (let i = 0; i < list.length; i++) {
            list[i].seatState = 0
            this.choose(list[i])
          }
        }
      },

      getRelationSeat(vale, key = 'seatPieceNo') {
        //获取关联座位
        return this.allSet.filter((i) => i[key] === vale)
      },
      addChoose(seats) {
        // 添加选中
        const { salePrice, ticketPrice, serviceAddFee, areas = [] } = this.planInfo
        for (let len = seats.length; len--; ) {
          let info = seats[len]
          let priceInfo = {
            salePrice,
            ticketPrice,
            serviceAddFee
          }
          info.seatState = STATUS_CHECKED
          // const curSeatIdxs = info.fkey.split('-')
          if (info.areaId && areas.length > 0) {
            const areaItem = areas.find((i) => i.areaId === info.areaId)
            if (areaItem) {
              priceInfo = areaItem
            }
          }
          info = Object.assign(info, priceInfo)
          this.checkSeat.push(info)
        }
      },
      removeSeat(e) {
        // 删除座位
        const index = e
        this.choose(this.checkSeat[index])
      },

      removeChoose(seats) {
        // 删除选中
        for (let len = seats.length; len--; ) {
          const info = seats[len]
          info.seatState = STATUS_UNCHECK
          const index = this.checkSeat.findIndex((i) => i.seatNo === info.seatNo)
          if (index !== -1) {
            this.checkSeat.splice(index, 1)
          }
        }
      },

      // 清除选座信息
      refreshSeat() {
        this.seatShow = false
        this.$tools.nextTick(() => {
          this.seatShow = true
          this.getSeatInit()
          // #ifdef H5 || MP-ALIPAY
          this.setToCenter()
          // #endif
        })
      },
      getSeatInit() {
        this.checkSeat = []
      },

      async submit() {
        if (this.judgeChoose()) {
          this.handelRealName()
        }
      },
      judgeChoose() {
        // 判断选中
        const selectedSeatList = this.checkSeat
        if (!selectedSeatList || selectedSeatList.length === 0) {
          this.$msg.toast('请选择座位')
          return false
        }
        for (let i = 0; i < selectedSeatList.length; i++) {
          const _item = selectedSeatList[i]
          const _rowIndex = +_item.graphRow
          const _row = this.seatInfos[_rowIndex]
          const _col = +_item.graphCol // 当前列
          // 座位状态 -1不可售  0-未售，1-售出，2 置空位 3-预订，4-选中，7-已锁定,9-验收   -2 当前选座
          const leftOne = _row[_col - 1]
          const leftTwo = _row[_col - 2]
          const rightOne = _row[_col + 1]
          const rightTwo = _row[_col + 2]
          if (!leftOne || (leftOne.seatState !== STATUS_UNCHECK && leftOne.seatState !== STATUS_CHECKED)) {
            // 左边靠墙
          } else if (!rightOne || (rightOne.seatState !== STATUS_UNCHECK && rightOne.seatState !== STATUS_CHECKED)) {
            // 右边靠墙
          } else if (
            leftOne &&
            leftOne.seatState === STATUS_UNCHECK &&
            leftTwo &&
            leftTwo.seatState === STATUS_UNCHECK &&
            rightOne &&
            rightOne.seatState === STATUS_UNCHECK &&
            rightTwo &&
            rightTwo.seatState === STATUS_UNCHECK
          ) {
            // 左右必须都有两个位置
          } else {
            if (leftOne && leftOne.seatState === STATUS_UNCHECK && (!leftTwo || leftTwo.seatState !== STATUS_UNCHECK)) {
              // 左边空一格
              for (var j = _col + 1; j < _row.length; j++) {
                const right = _row[j]
                if (!right) {
                  break
                }
                if (right.seatState !== STATUS_UNCHECK && right.seatState !== STATUS_CHECKED) {
                  break
                }
                if (right.seatState === STATUS_UNCHECK) {
                  this.$msg.toast('请勿隔空选座')
                  return false
                }
              }
            }

            if (rightOne && rightOne.seatState === STATUS_UNCHECK && (!rightTwo || rightTwo.seatState !== STATUS_UNCHECK)) {
              // 右边空一格
              for (var k = _col - 1; k >= STATUS_UNCHECK; k--) {
                const left = _row[k]
                if (!left) {
                  break
                }
                if (left.seatState !== STATUS_UNCHECK && left.seatState !== STATUS_CHECKED) {
                  break
                }
                if (left.seatState === STATUS_UNCHECK) {
                  this.$msg.toast('请勿隔空选座')
                  return false
                }
              }
            }
          }
        }
        return true
      },
      agreen() {
        this.modal.show = false
        this.hideLock = true
        this.lockSeat()
      },
      handelRealName() {
        const status = this.$auth.getRealNameStatus()
        const msg = this.$auth.getRealNameAg()

        if (status === '0') {
          this.hideLock = true
          this.lockSeat()
        } else {
          if (msg) {
            this.modal.show = true
            this.modal.content = msg
          } else {
            this.hideLock = true
            this.lockSeat()
          }
        }
      },

      lockSeat() {
        const salePrice = this.salePrice
        const seatList = this.checkSeat.map((item) => {
          return {
            hallNo: item.hallNo,
            seatNo: item.seatNo,
            seatPieceName: item.seatPieceName,
            ticketPrice: salePrice
          }
        })
        const data = {
          cinemaId: this.query.cinemaId,
          planKey: this.planKey,
          // needLoading: true,
          seatList: JSON.stringify(seatList)
        }

        uni.$api.orderFilm
          .lockSeat(data)
          .then((res) => {
            const data = res

            this.$tools.navigateTo('/pagesOrder/sureOrder/index', {
              orderId: data.orderId,
              discountType: this.query.discountType || ''
            })
          })
          .catch((res) => {
            // #ifdef MP-TOUTIAO
            console.log('catch', res)
            if (res && res.data && res.data.status === '00002') {
              this.content = res.data.content
              this.showDialog()
            }
            // #endif
            setTimeout(() => {
              this.getPlanSeat()
            }, 1500)
          })
      },
      reload() {
        this.reloadShow = false
        this.planKey = ''
        this.$tools.nextTick(() => {
          this.planKey = this.planKey || this.query.planKey
          this.planChange()
          this.planHeadDateList()
          this.reloadSeatNav()
          this.reloadShow = true
        })
      },
      seatScale(e) {
        this.$utils.debounce(this.getSeatScale, [e], this, 150)
      },
      getSeatScale(e) {
        const data = e.detail
        const query = uni.createSelectorQuery()
        this.changeStyle.navScale = data.scale
        // #ifdef  MP-TOUTIAO
        this.changeStyle.x = -data.x

        // #endif
        // #ifdef MP-WEIXIN
        this.changeStyle.x = -data.x / data.scale
        this.setToCenter(data)
        // #endif
        // #ifdef MP-ALIPAY
        query
          .select('#seatBox')
          .boundingClientRect((data) => {
            console.log('getSeatScale', data)
            this.changeStyle.x = -data.left / this.changeStyle.navScale
          })
          .exec()
        // #endif

        // #ifdef H5
        const seatBox = document.getElementById('seatBox').getBoundingClientRect().left
        this.changeStyle.x = -seatBox / data.scale
        // #endif
      },
      seatChange(e) {
        this.$utils.debounce(this.getSeatChange, [e], this, 150)
      },

      getSeatChange(e) {
        console.log('getSeatChange')
        // #ifdef MP-WEIXIN || MP-TOUTIAO || H5
        const data = e.detail
        console.log(data, this.changeStyle, this.changeStyle.x)
        this.changeStyle.x = -data.x / this.changeStyle.navScale
        // #endif
        // #ifdef MP-TOUTIAO
        this.setToCenter(data)
        // #endif
        // #ifdef  MP-ALIPAY
        const query = uni.createSelectorQuery()
        query
          .select('#seatBox')
          .boundingClientRect((data) => {
            console.log('getSeatChange', data)
            this.changeStyle.x = -data.left / this.changeStyle.navScale
          })
          .exec()
        // #endif
      },
      openPlan() {
        this.showPlan = !this.showPlan
      },
      showDialog() {
        this.showCanUse = true
      },
      closeDialog() {
        this.showCanUse = false
      },
      setToCenter(data) {
        console.log('setToCenter', this.x)
        if (this.x === 0 || this.isReload) {
          this.isReload = false
          // #ifdef MP-WEIXIN
          this.x = data.x
          this.y = data.y
          // #endif
          setTimeout(() => {
            const query = uni.createSelectorQuery()
            const seatContent = query.select('#seatContent')
            seatContent
              .boundingClientRect((res) => {
                const sys = uni.getSystemInfoSync()
                console.log(res, '================res', sys)
                this.x = -((res.width - sys.screenWidth) / 2)
                this.y = -((res.height - 336) / 2)
                console.log(this.x, this.y, '=====')
              })
              .exec()
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .chooseSet {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    /* #ifdef MP-WEIXIN || MP-ALIPAY  */
    height: calc(100vh - 88px);
    /* #endif  */
    /*  #ifdef H5  || MP-TOUTIAO  */
    height: 100vh;
    /* #endif */
    overflow: hidden;
    .choose-skeleton {
      min-height: 368px;
      width: 100%;
      overflow: hidden;
    }
    .seat-center {
      /* #ifdef MP-WEIXIN || MP-ALIPAY  */
      height: calc(100vh - 281px - 132px - 63px);
      /* #endif  */
      /*  #ifdef H5 || MP-TOUTIAO */
      height: calc(100vh - 281px - 132px + 88px - 63px);
      /* #endif */
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;
      .seat-box {
        min-width: 100%;
        display: inline-flex;
        flex-direction: row;
        transform-origin: 0px 0px;
        /* #ifdef MP-TOUTIAO */
        transform-origin: center;
        /* #endif */
        padding: 20rpx 15rpx; // 0 15
        height: auto;
        width: auto;
      }

      .seat-left {
        z-index: 88;
        padding-top: 38rpx;
        margin: 0 30rpx 0 20rpx;
        display: inline-flex;
        flex-direction: column;
        border-radius: 20rpx;
        position: absolute;
        box-sizing: border-box;
        left: 0;
        top: 0rpx;
        transform-origin: 0 0;
        transition-property: all;
        transition-duration: 0.8s;
      }
      .seat-left .seat-item {
        width: 54rpx;
        padding-left: 0;
        padding-right: 0;
        font-size: 16rpx;
        height: 27px;
        background: transparent;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        box-sizing: border-box;
        margin: 3px 0;
        background: #6dddea;
        border-radius: 10rpx;
      }

      .seat {
        position: static;
        padding: 20rpx 100rpx 100rpx;

        transform-origin: 0px 0px;
        /* #ifdef MP-TOUTIAO */
        transform-origin: center;
        /* #endif */
        box-sizing: border-box;
      }
      .seat .h-line {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 0;
        margin-top: -40rpx;
        border-bottom: dashed 1px #fff;
        z-index: -1;
      }
      .seat .v-line {
        position: absolute;
        margin: 0 auto;
        height: calc(100% - 80rpx);
        left: calc(50%);
        border-left: dashed 1px #fff;
        z-index: -1;
      }
      .seat .seat-row {
        display: flex;
        flex-direction: row;
      }
    }
  }
  .footer {
    position: fixed;
    width: 100%;
    background: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    z-index: 90;
    border-radius: 50rpx 50rpx 0 0;
    overflow: hidden;
    .f-btn__content {
      box-sizing: border-box;
    }
    .btn-wrap {
      position: relative;
      .btn {
        color: #fff;
        height: 100rpx;
        border-radius: 10rpx;
        width: 690rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 42rpx;
        margin: 0 auto;
      }
      .btn-tip {
        width: 501rpx;
        height: 34rpx;
        position: absolute;
        top: 0;
        margin-top: -17rpx;
        left: 50%;
        margin-left: -250rpx;
        background: url(https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/bt-tip.png);
        background-size: 501rpx 34rpx;
        background-repeat: no-repeat;
        z-index: 2;
        color: #924920;
        font-size: 22rpx;
      }
    }
  }
  .seat-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin: 15px 15px 10px 15px;
    .seat-header-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      padding: 0 5px;
      color: #fff;
    }
    .seat-item {
      margin: 3px;
      background: #fff;
      border-radius: 10rpx;
      background-size: 100% 100%;
      width: 16px;
      height: 16px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      &[lovers] {
        background-size: 100% 100%;
      }
      &.s {
        width: 16px;
        height: 16px;
      }
      &.disabled {
        background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/seat-status/ic_lock_s.png');
        background-size: 100% 100%;
      }
      &.sell {
        background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/seat-status/ic_not_sale_s.png') no-repeat;
        background-size: 100% 100%;
        &.lovers {
          background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/seat-status/ic_not_sale_s.png') no-repeat;
          background-size: 100% 100%;
        }
      }

      &.selected {
        background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/seat-status/ic_checked_s.png') no-repeat;
        background-size: 100% 100%;
        &.lovers {
          background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/seat-status/ic_love_checked.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      &.none {
        background: transparent;
      }
    }
  }
  .set-top-bg {
    margin: 0 auto;
    width: 653rpx;
    height: 29rpx;
    background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/cinema-set-top-bg.png') no-repeat center center;
    background-size: 100% 100%;
  }
  .logo-box {
    height: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .logo {
    display: block;
    margin: 0 auto;
    height: 100%;
    width: auto;
  }
  .seat-date-scroll {
    box-sizing: border-box;
    background: #fff;
  }
  .showplan {
    background: #fff;
    height: 130rpx;
    transition: height 0.5s;
    overflow-y: hidden;
  }

  .closeplan {
    background: #fff;
    height: 0;
    overflow: hidden;
    transition: height 0.5s;
  }
  .arrow_down {
    transform: rotate(180deg);
  }
  .icon-loading {
    width: 68rpx;
    height: 68rpx;
    animation: rotation 1s linear infinite;
  }
  @keyframes rotation {
    form {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
